<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
%>
<html>
<head>
    <title>Title</title>
</head>
<body>


<jsp:include page="/WEB-INF/jsp/common/css_js.jsp"/>
<link href="<%=path%>/css/common.css" rel="stylesheet">
<div class="page-container">


    <table class="table">
        <thead>
        <tr>
            <td>编号</td>
            <td>用户名</td>
            <td>密码</td>
            <td>权限</td>
            <td>

                    <a class="btn btn-success" href="javascript:" onclick="add()">添加</a>

            </td>

        </tr>

        </thead>
        <tbody>
        <c:forEach items="${managerList}" var="one">
            <tr id="b_${one.userId}">
                <td class="userId">${one.userId}</td>
                <td class="userName">${one.userName}</td>
                <td class="password">${one.password}</td>
                <td class="userPower">${one.userPower}</td>

                <td>
                    <div class="btn-group btn-group-sm">
                        <a class="btn btn-success" href="javascript:" onclick="update(${one.userId})">修改</a>
                        <a class="btn btn-danger" href="javascript:" onclick="del(${one.userId})">删除</a>
                    </div>
                </td>
            </tr>
        </c:forEach>
        </tbody>
    </table>
    <div class="mt-3  mb-3 ">
        <a class="btn btn-success" href="javascript:" onclick="add()">添加</a>
    </div>


    <!-- 添加用的模态框 -->
    <div class="modal fade" id="addModal">
        <div class="modal-dialog">
            <div class="modal-content">

                <div class="modal-header">
                    <h5 class="modal-title">添加manager</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <div class="modal-body">
                    <form  method="post" onsubmit="return false;">
                        <div class="form-group">
                            <label>用户名</label>
                            <input type="text" name="userName" id="userName" class="form-control">
                        </div>
                        <div class="form-group">
                            <label>密码</label>
                            <input type="text" name="password" id="password" class="form-control">
                        </div>
                        <div class="form-group">
                            <label>权限</label>
                            <input type="text" name="userPower" id="userPower" class="form-control">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="add_do()">提交</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 修改用的模态框 -->
    <div class="modal fade" id="updateModal">
        <div class="modal-dialog">
            <div class="modal-content">

                <div class="modal-header">
                    <h5 class="modal-title">修改manager</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <div class="modal-body">
                    <form id="addForm" method="post" onsubmit="return false;">
                        <div class="form-group">
                            <label>用户ID</label>
                            <input type="text" name="userId" id="userId1" class="form-control" readonly="true">
                        </div>
                        <div class="form-group">
                            <label>用户名</label>
                            <input type="text" name="userName" id="userName1" class="form-control">
                        </div>
                        <div class="form-group">
                            <label>密码</label>
                            <input type="text" name="password" id="password1" class="form-control">
                        </div>
                        <div class="form-group">
                            <label>权限</label>
                            <input type="text" name="userPower" id="userPower1" class="form-control">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="update_do()">提交</button>
                </div>
            </div>
        </div>
    </div>


    <!-- 删除用的模态框 -->
    <div class="modal fade" id="delModal">
        <div class="modal-dialog">
            <div class="modal-content">

                <div class="modal-header">
                    <h5 class="modal-title">删除manager</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <div class="modal-body">
                    <form method="post" onsubmit="return false;">
                        <div class="form-group">
                            <label>用户ID</label>
                            <input type="text" name="userId" id="userId2" class="form-control" readonly="true">
                        </div>
                        <div class="form-group">
                            <label>用户名</label>
                            <input type="text" name="userName" id="userName2" class="form-control" readonly="true">
                        </div>
                        <div class="form-group">
                            <label>密码</label>
                            <input type="text" name="password" id="password2" class="form-control" readonly="true">
                        </div>
                        <div class="form-group">
                            <label>权限</label>
                            <input type="text" name="userPower" id="userPower2" class="form-control" readonly="true">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="del_do()">提交</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    function add() {
        $("#addModal").modal("show");//弹模态框
    }
    function add_do() {
        $.ajax({
            url: "addManager",
            method: "post",
            dataType: "json",
            data: {
                userName: $("#userName").val(),
                password: $("#password").val(),
                userPower: $("#userPower").val()
            },
            success: function (data) {
                console.log(data);
                alert(data.msg)
            }
        });
    }

  // 修改用的
  function update(userId) {
        $("#updateModal").modal("show");
        //法一：把表格的第id行的记录拿出来，反填到模态框中
        $("#userId1").val($("#b_" + userId + " .userId").text());
        $("#userName1").val($("#b_" + userId + " .userName").text());
        $("#password1").val($("#b_" + userId + " .password").text());
        $("#userPower1").val($("#b_" + userId + " .userPower").text());
    }

    function update_do() {
        $.ajax({
            url:"updateManager",
            method:"post",
            data:{
                userId:$("#userId1").val(),
                userName:$("#userName1").val(),
                password:$("#password1").val(),
                userPower:$("#userPower1").val()
            },
            success:function (data) {
                console.log(data);
                if('ok'==data.msg) {
                    alert("修改成功");
                    location.reload();
                }
                else alert("修改失败");
            }
        });
    }



    //删除用的
    function del(userId) {
        $("#delModal").modal("show");
        //法一：把表格的第id行的记录拿出来，反填到模态框中
        $("#userId2").val($("#b_" + userId + " .userId").text());
        $("#userName2").val($("#b_" + userId + " .userName").text());
        $("#password2").val($("#b_" + userId + " .password").text());
        $("#userPower2").val($("#b_" + userId + " .userPower").text());
    }

    function del_do() {
        $.ajax({
            url:"delManager",
            method:"post",
            data:{
                userId:$("#userId2").val(),
                userName:$("#userName2").val(),
                password:$("#password2").val(),
                userPower:$("#userPower2").val()
            },
            success:function (data) {
                console.log(data);
                if('ok'==data.msg) {
                    alert("删除成功");
                    location.reload();
                }
                else alert("删除失败");
            }
        });
    }


</script>
</body>
</html>
